<template>
  <div :class="classes">
    <slot></slot>
  </div>
</template>

<script type="text/babel">
import Emitter from '../../mixins/emitter';
import {PREFIX} from '../../consts/index';

export default {
  name: 'XSplitArea',
  mixins: [Emitter],
  props: {
    size: {
      type: Number,
      require: false
    },
    minSize: {
      type: Number,
      require: false
    },
    maxSize: {
      type: Number,
      require: false
    }
  },
  computed: {
    classes() {
      return `${PREFIX}split ${PREFIX}split-` + this.$parent.direction
    }
  },
  watch: {
    'size'() {
      this.$parent.changeAreaSize()
    },
    'minSize'() {
      this.$parent.changeAreaSize()
    },
    'maxSize'() {
      this.$parent.changeAreaSize()
    }
  }
};
</script>
